<!--拆分布局块配置表单-->

<template>
  <Modal v-model="visible"
         :title="type == 'h'?'横向拆分布局块':'纵向拆分布局块'"
         :mask-closable="true"
         :width="250"
         :z-index="999">

    <Form ref="splitLayoutItemForm" :label-width="80" :model="formData" :rules="ruleValidate">
      <FormItem label="拆分数量" prop="splitNum">
        <InputNumber v-model="formData.splitNum" :min="1" :max="1000" :step="1"></InputNumber>
      </FormItem>
      <FormItem label="间距" prop="marginNum">
        <InputNumber v-model="formData.marginNum" :min="0" :max="1000" :step="5"></InputNumber> px
      </FormItem>
    </Form>

    <div slot="footer">
      <Button type="default" @click="visible = false">关闭</Button>
      <Button type="primary" @click="submitForm">确认</Button>
    </div>
  </Modal>
</template>

<script>

export default {
  name: "SplitLayoutItemFormModal",
  props: {},
  data() {
    return {
      visible: false,
      type: '',
      layoutItemId: '',
      formData: {
        splitNum: 1,
        marginNum: 0
      },
      ruleValidate: {
        splitNum: [
          {required: true, type: 'number', message: '拆分数量不能为空', trigger: 'blur'},
          {type: 'number', min: 1, max: 1000, message: '拆分数量必须大于等于1', trigger: 'blur'}
        ],
        marginNum: [
          {required: true, type: 'number', message: '间距不能为空', trigger: 'blur'},
          {type: 'number', min: 0, max: 1000, message: '间距必须大于等于0', trigger: 'blur'}
        ],
      },
    }
  },
  mounted() {

  },
  methods: {
    init(type, layoutItemId) {
      this.visible = true
      this.type = type
      this.layoutItemId = layoutItemId
    },

    submitForm() {
      this.$refs.splitLayoutItemForm.validate((valid) => {
        if (valid) {
          this.$Loading.start();
          this.$DesignerCommonUtil.splitLayoutItem(this.type, this.layoutItemId, this.formData.splitNum, this.formData.marginNum).then((success)=>{
            this.$Loading.finish();
            this.formData.splitNum = 1
            this.formData.marginNum = 0
            this.visible = false
          }).catch(error => {
            console.log(error)
            this.$Loading.error();
          })
        }
      });
    }
  },
  computed: {},
  watch: {}
}
</script>

<style lang="less" scoped>

</style>
